<template>
    <div class="admin">
        <div class="tanxin button">
            <p>筛选搜索</p>
            <div>
                <el-button @click="chongzhi">重置</el-button>
                <el-button @click="sousuo">查询搜索</el-button>
            </div>
        </div>
        <div class="input">
            <div style="margin-right: 20px;">
                <el-form-item label="优惠券名称">
                    <el-input v-model="name" placeholder="优惠券名称" class="el-input" type="text"></el-input>
                </el-form-item>
            </div>
            <el-form-item label="优惠券类型">
                <el-select placeholder="全部" v-model="type">
                    <el-option label="全场赠券" value="0" />
                    <el-option label="会员赠券" value="1" />
                    <el-option label="购物赠券" value="2" />
                    <el-option label="注册赠券" value="3" />
                </el-select>
            </el-form-item>
        </div>

    </div>
    <div class="tanxin tianjia">
        <span>
            数据列表
        </span>
        <div>
            <el-button @click="onaddCoupon">添加</el-button>
        </div>
    </div>
    <div class="table" :key="valKey">
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column label="编号" prop="id" width="60" />
            <el-table-column property="name" label="优惠名称" width="120" />
            <el-table-column label="优惠卷类型">
                <template #default="scope">
                    {{ scope.row.type == 0 ? '全场赠券' : '' }}
                    {{ scope.row.type == 1 ? '会员赠券' : '' }}
                    {{ scope.row.type == 2 ? '购物赠券' : '' }}
                    {{ scope.row.type == 3 ? '注册赠券' : '' }}
                </template>
            </el-table-column>
            <el-table-column label="使用门槛" align="center" width="120">
                <template #default="scope">
                    {{ ` 满${scope.row.minPoint}元可用` }}
                </template>
            </el-table-column>
            <el-table-column label="面值">
                <template #default="scope">
                    {{ `${scope.row.amount}元` }}
                </template>
            </el-table-column>
            <el-table-column label="使用平台">
                <template #default="scope">
                    {{ scope.row.platform == 0 ? '全平台' : "" }}
                    {{ scope.row.platform == 1 ? '移动平台' : "" }}
                    {{ scope.row.platform == 2 ? 'PC平台' : "" }}
                </template>
            </el-table-column>
            <el-table-column label="有效日期" width="380" align="center">
                <template #default="scope">
                    {{ scope.row.startTime ?
                        `${dayjs(scope.row.startTime).format('YYYY-MM-DD HH:mm:ss')}
                                        至${dayjs(scope.row.endTime).format('YYYY-MM-DD HH:mm:ss')}` : '' }}
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template #default="scope">
                    {{
                        dayjs(scope.row.endTime).format('YYYY-MM-DD')
                        < (date.getFullYear() + '') ? '已过期' : '活动进行中' }} </template>
            </el-table-column>
            <el-table-column label="操作" width="180" fixed="right" align="center">
                <template #default="scope">
                    <div class="tanxin" style="color: skyblue;">
                        <a @click="gocouponHistory(scope.row.id)">查看</a>
                        <a @click="updateCoupon(scope.row.id)">编辑</a>
                        <a @click="ondelet(scope.row.id)">删除</a>
                    </div>

                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <el-dialog v-model="dialogVisible" title="提示" width="30%">
        <span>你确定要删除嘛？</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleClose">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import * as api from '../../request/api'
import useTabel from '../../hooks/useGoods'
import dayjs from 'dayjs'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
// 路由
let router = useRouter()
// 优惠卷名字
let name = ref('')
// 优惠卷类型
let type = ref()
let date = new Date()

// 封装请求和分页
let { tableData, getTableData, pagination, handleSizeChange, handleCurrentChange } = useTabel(api.yxadmin.getCouponListres,
    {
        name, type
    })
// 搜索按钮
let sousuo = () => {
    getTableData()
}
// 重置按钮
let chongzhi = () => {
    name.value = ''
    type.value = ''
    getTableData()
}
// 查看
let gocouponHistory = (id: number) => {
    // router.path('/sms/couponHistory')
    router.push(`/sms/couponHistory?id=${id}`)
}
// 编辑
let updateCoupon = (id: number) => {
    router.push('/sms/updateCoupon?id=' + id)
}
let deletId = ref()
// 点击删除按钮
let ondelet = (id: number) => {
    deletId.value = id
    dialogVisible.value = true
}
let valKey = ref(1)
// 控制删除模态框
const dialogVisible = ref(false)
// 确认删除按钮
const handleClose = () => {
    api.yxadmin.deleteCoupon(deletId.value)
    getTableData()
    ElMessage({
        type: 'success',
        message: '操作成功',
    })

    dialogVisible.value = false
    // 修改key值进行更新
    valKey.value = valKey.value + 1
    console.log(tableData);

}
let onaddCoupon = () => {
    router.push('/sms/addCoupon')
}
</script>

<style scoped lang="scss">
.admin {
    margin: 20px;
    padding: 20px;
    padding-bottom: 30px;
    border: 1px solid #eee;
    border-radius: 5px;
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border: 1px solid #eee;
    padding: 20px;
    box-sizing: border-box;

    .button {
        display: flex;
        align-items: center;
    }

    .input {
        margin-top: 20px;
        margin-left: 30px;
        font-size: 14px;
        align-items: center;
        margin-bottom: 20px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;


    }
}

.tianjia {
    margin: 20px;
    padding: 20px;
    height: 60px;
    box-sizing: border-box;
    margin-top: 20px;
    padding: 20px;
    border-radius: 5px;
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border: 1px solid #eee;
    align-items: center;
    font-size: 14px;
    margin-bottom: 20px;
}

.table {
    margin: 20px;
    border: 1px solid #eee;
}
</style>